.root {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
  height: 150px;
  perspective: 800px;
  pointer-events: none;
}

.container {
  margin: 0 auto;
  width: 150px;
  height: 150px;
  position: relative;
  transform: rotateX(60deg);
  pointer-events: none;
}

.base {
  width: 0;
  height: 0;
  position: absolute;
  border-style: solid;
  opacity: 0.6;

  &:not(.disable) {
    pointer-events: auto;

    &:hover {
      opacity: 1;
    }
  }

  &:before {
    content: '';
    position: absolute;
    border-style: solid;
  }
}

.front {
  top: 0;
  left: 50%;
  transform: translateX(-50%);
  border-width: 0 20px 40px 20px;
  border-color: transparent transparent #fff transparent;

  &:before {
    border-width: 0 18px 36px 18px;
    border-color: transparent transparent #1e2329 transparent;
    transform: translate(-18px, 2.5px);
  }
}

.back {
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  border-width: 40px 20px 0 20px;
  border-color: #fff transparent transparent transparent;

  &:before {
    border-width: 36px 18px 0 18px;
    border-color: #1e2329 transparent transparent transparent;
    transform: translate(-18px, -38.5px);
  }
}

.left {
  top: 50%;
  left: 0;
  transform: translateY(-50%);
  border-width: 20px 40px 20px 0;
  border-color: transparent #fff transparent transparent;

  &:before {
    border-width: 18px 36px 18px 0;
    border-color: transparent #1e2329 transparent transparent;
    transform: translate(2.5px, -18px);
  }
}

.right {
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  border-width: 20px 0 20px 40px;
  border-color: transparent transparent transparent #fff;

  &:before {
    border-width: 18px 0 18px 36px;
    border-color: transparent transparent transparent #1e2329;
    transform: translate(-38.5px, -18px);
  }
}